<script lang="ts" setup>
  import { getMedicalListAPI } from '@/api'
  import type { MedicalData, MedicalQuery } from '@/types/medical'
  import { onMounted, ref } from 'vue'
  const btn1 = ref<string[]>(['取消问诊', '查看处方', '删除订单'])
  const btn2 = ref<string[]>(['去支付', '继续沟通', '咨询其他医生'])
  const medicalList = ref<MedicalData>({} as MedicalData)
  const medicalQuery = ref<MedicalQuery>({
    current: '1',
    type: '2',
    pageSize: '10',
  })
  onMounted(() => {
    getMedicalList()
  })
  const getMedicalList = async () => {
    medicalList.value = await getMedicalListAPI(medicalQuery.value)
    console.log(medicalList.value)
  }
</script>

<template>
  <view class="container">
    <view class="container_items" v-for="(item, index) in medicalList.rows" :key="index">
      <view class="info">
        <image class="avatar" src="/static/uploads/doctor-avatar-2.png"></image>
        <view class="details">
          <text class="name">{{ item.docInfo?.name }}</text>
          <text class="department"> </text>
          <text
            class="status"
            :class="{
              textBlackColor: item.statusValue === '待接诊',
              textAquaColor: item.statusValue === '咨询中',
              textDarkgreyColor: item.statusValue === '已取消',
              textDimgrayColor: item.statusValue === '已完成',
            }"
            >{{ item.statusValue }}</text
          >
        </view>
      </view>
      <view class="container_bottom">
        <view class="description">
          <text class="text1">病情描述：</text>
          <text>{{ item.illnessDesc }}</text>
        </view>
        <view class="price">
          <text class="text1">价格：</text>
          <text>￥{{ item.payment }}</text>
        </view>
        <view class="date">
          <text class="text1 textsmall">{{ item.createTime }}</text>
        </view>
        <view class="actions">
          <text v-if="item.statusValue === '已完成'" class="diandiandian">...</text>
          <text v-if="item.statusValue !== '咨询中'" class="cancel">{{
            btn1[item.statusValue === '已完成' ? 1 : item.statusValue === '已取消' ? 2 : 0]
          }}</text>
          <text class="continue">{{
            btn2[item.statusValue === '待支付' ? 0 : item.statusValue === '已取消' ? 2 : 1]
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
